<div ng-if="vm.ShowControls" ng-include="'app/layout/FABGoBack.html'"></div>
<section id="demo-view" class="mainbar layout layout-wrap referralviewblock" layout="column" layout-align="sapce-around" >
    <br />
    <div class="layout layout-wrap" layout="row" layout-align="center center" flex="90">
        <md-card class="layout layout-fill md-whiteframe-9dp DemoCard" flex="90">
            <md-card-content>
                <md-toolbar class="layout-wrap flex">
                    <h3 class="Padding10">Patient Demographics</h3>
                </md-toolbar>
                <form name="PatientDemoForm">
                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>First Name</label>
                        <input ng-model="vm.FirstName" type="text" name="FirstName" required ng-readonly="vm.ReadOnly">
                        <div ng-messages="PatientDemoForm.FirstName.$error" role="alert">
                            <div ng-message-exp="['required']">
                                First Name is required
                            </div>
                        </div>
                    </md-input-container>

                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>Last Name</label>
                        <input ng-model="vm.LastName" type="text" name="LastName" required ng-readonly="vm.ReadOnly">
                        <div ng-messages="PatientDemoForm.LastName.$error" role="alert">
                            <div ng-message-exp="['required']">
                                Last Name is required
                            </div>
                        </div>
                    </md-input-container>

                    <label>Date of Birth</label><md-datepicker class="md-icon-float md-block md-accent" ng-model="vm.DOB" md-placeholder="DOB" name="DOB" ng-disabled="vm.ReadOnly"></md-datepicker>

                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>Address Line 1</label>
                        <input ng-model="vm.AddrLine1" type="text" name="AddressLine1" ng-readonly="vm.ReadOnly">
                       </md-input-container>

                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>Address Line 2 </label>
                        <input ng-model="vm.AddrLine2" type="text" name="AddressLine2" ng-readonly="vm.ReadOnly">
                    </md-input-container>

                    <div layout="row" layout-align="space-around center">
                        <md-input-container class="md-icon-float md-block md-accent">
                            <label>State</label>
                            <md-select name="cmbPractice" ng-model="vm.PatientState" ng-disabled="vm.ReadOnly">
                                <md-option ng-repeat="St in vm.StateList" value="{{St.StateName}}">
                                    {{St.StateName}}
                                </md-option>
                            </md-select>
                        </md-input-container>
                        <span flex="10"></span>
                            <md-input-container class="md-icon-float md-block md-accent">
                                <label>ZipCode</label>
                                <input ng-model="vm.zipcode" type="text" name="zipcode" ng-readonly="vm.ReadOnly">
                            </md-input-container>
                        <span class="flex"></span>
                        </div>


                    <div layout="row" layout-align="space-around center">
                        <md-input-container class="md-icon-float md-block md-accent">
                            <label>Phone Number</label>
                            <input ng-model="vm.phno" type="text" name="phno"  ng-readonly="vm.ReadOnly">
                        </md-input-container>
                        <!--<div ng-messages="PatientDemoForm.phno.$error" role="alert">
                            <div ng-message-exp="['required','minlength', 'maxlength', 'pattern']">
                                Phone Number is required and should be numeric
                            </div>
                        </div>-->
                        <span flex="10"></span>
                        <md-input-container class="md-icon-float md-block md-accent">
                            <label>Phone Type</label>
                            <md-select name="phonetype" class="md-accent" ng-model="vm.phonetype" ng-disabled="vm.ReadOnly" >
                                <md-option value="Home">
                                    Home
                                </md-option>
                                <md-option selected="selected" value="Mobile">
                                    Mobile
                                </md-option>
                                <md-option value="Other">
                                    Other
                                </md-option>
                            </md-select>
                        </md-input-container>
                        <span class="flex"></span>
                        <!--<div ng-messages="PatientDemoForm.phonetype.$error" role="alert">
                            <div ng-message-exp="['required']">
                                Phone Type is required
                            </div>
                        </div>-->
                    </div>

                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>Email</label>
                        <input ng-model="vm.Email" type="text" name="Email" ng-pattern="/^.+@.+\..+$/" minlength="10" maxlength="100" ng-readonly="vm.ReadOnly">
                        <div ng-messages="PatientDemoForm.Email.$error" role="alert">
                            <div ng-message-exp="['minlength', 'maxlength', 'pattern']">
                                Invalid Email Address
                            </div>
                        </div>
                    </md-input-container>

                    <div layout="row" layout-align="space-around end">
                        <md-input-container class="md-icon-float md-block md-accent" flex="75">
                            <label>Primary Insurance</label>
                            <textarea ng-model="vm.InsuranceInfo" type="text" name="InsuranceInfo" rows="5" ng-readonly="vm.ReadOnly"/>
                        </md-input-container>

                        <md-input-container class="md-icon-float md-block md-accent" flex="20">
                            <label>Plan Number</label>
                            <input ng-model="vm.PlanNumber" type="text" name="PlanNumber"  ng-readonly="vm.ReadOnly">
                        </md-input-container>
                     </div>


                    <div layout="row" layout-align="space-around end">
                        <md-input-container class="md-icon-float md-block md-accent" flex="75">
                            <label>Secondary Insurance</label>
                            <textarea ng-model="vm.InsuranceInfo1" type="text" name="InsuranceInfo1" rows="5" ng-readonly="vm.ReadOnly" />
                    </md-input-container>

                        <md-input-container class="md-icon-float md-block md-accent" flex="20">
                            <label>Plan Number</label>
                            <input ng-model="vm.PlanNumber1" type="text" name="PlanNumber1" ng-readonly="vm.ReadOnly">
                        </md-input-container>
                    </div>

                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>Reason for Referral</label>
                        <textarea ng-model="vm.RefReason" type="text" name="RefReason" rows="5" ng-disabled="vm.ReadOnly"></textarea>
                    </md-input-container>


                        <md-input-container class="md-icon-float md-block md-accent">
                            <label>Notes</label>
                            <textarea ng-model="vm.Notes" type="text" name="Notes" rows="5" ng-readonly="vm.ReadOnly"></textarea>
                        </md-input-container>

                        <!--<md-input-container class="md-icon-float md-block md-accent">
            <label>Referring Physician</label>
            <input ng-model="vm.ReferringPhysician" type="text" name="FirstName" required ng-readonly="vm.ReadOnly" >
        </md-input-container>-->

                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>Referring Physician</label>
                        <md-select name="cmbPhysician" class="md-accent" ng-model="vm.ReferringPhysician" required ng-disbaled="(vm.ReadOnly && $root.IsController && vm.ShowControls)">
                            <md-option ng-repeat="Phy in vm.ReferringPhysicians" value="{{Phy.PhysicianID}}">
                                {{Phy.PhysicianName}}
                            </md-option>
                        </md-select>
                    </md-input-container>

                        <md-input-container class="md-block">
                            <label>Speciality Requested</label>
                            <md-select name="cmbPractice" ng-model="vm.ReqPractice" required ng-disabled="(vm.ShowControls && vm.ReadOnly)">
                                <md-option ng-repeat="Prac in vm.PracticesList" value="{{Prac.PracticeID}}">
                                    {{Prac.PracticeName}}
                                </md-option>
                            </md-select>
                            <div ng-messages="ProcessReferralForm.RefPractice.$error" role="alert">
                                <div ng-message-exp="['required']">
                                    Select a practice
                                </div>
                            </div>
                        </md-input-container>

                        <div class="layout layout-wrap" layout="row" layout-align="space-between center" flex>
                            <div class="layout layout-wrap" layout="column" layout-align="space-around" flex>
                                <md-input-container class="md-icon-float md-block md-accent" flex>
                                    <label>Preferred PPG Physician</label>
                                    <md-select name="cmbPreferredPhysician" class="md-accent" ng-model="vm.PreferredPhysician" ng-disbaled="(vm.ReadOnly && $root.IsController && vm.ShowControls )">
                                        <md-option ng-repeat="Phy in vm.Physicians | filter : vm.FilterPracticePPG" value="{{Phy.PhysicianID}}">
                                            {{Phy.PhysicianName}}
                                        </md-option>
                                    </md-select>
                                </md-input-container>

                                <md-switch ng-model="vm.OtherPhysician" aria-label="Non PPG Physician?" ng-disabled="vm.ReadOnly">
                                    Show Other Physician
                                </md-switch>
                            </div>
                        </div>
                        <div class="layout layout-wrap" layout="row" layout-align="space-between center" flex ng-if="vm.OtherPhysician">
                            <div class="layout layout-wrap" layout="column" layout-align="space-around" flex>
                                <md-input-container class="md-icon-float md-block md-accent" flex>
                                    <label>Preferred Physician</label>
                                    <md-select name="cmbPPGPreferredPhysician" class="md-accent" ng-model="vm.PreferredPhysician" ng-disbaled="( vm.ReadOnly && $root.IsController && vm.ShowControls)">
                                        <md-option ng-repeat="Phy in vm.Physicians | filter : vm.FilterPractice" value="{{Phy.PhysicianID}}">
                                            {{Phy.PhysicianName}}
                                        </md-option>
                                    </md-select>
                                </md-input-container>

                                <md-input-container class="md-icon-float md-block md-accent" flex="40">
                                    <label>Preferred Physician Phone / Fax</label>
                                    <input ng-model="vm.PrefPhone" type="text" name="PrefPhone" ng-readonly="vm.ReadOnly">
                                </md-input-container>


                                <md-switch ng-model="vm.EstablishedPatient" aria-label="Non PPG Physician?"  ng-disabled="vm.ReadOnly">
                                    Patient established with Physician?
                                </md-switch>
                            </div>
                        </div>
                        <div class="layout layout-wrap" layout="row" layout-align="space-between center">
                            <md-switch ng-model="vm.StatRequest" aria-label="STAT Request?" ng-disabled="vm.ReadOnly">
                                Is this a STAT / Urgent Request ?
                            </md-switch>
                        </div>

                        <md-card-footer>
                            <div class="md-actions" layout="row" layout-align="space-around center">
                                <md-button class="md-raised md-primary md-accent" ng-click="vm.EditClick()" ng-show="vm.ShowControls" ng-disabled="!vm.ReadOnly">EDIT</md-button>

                                <md-button class="md-raised md-primary md-accent" ng-click="vm.SavePatientData()" ng-disabled="vm.ReadOnly || PatientDemoForm.$invalid">SAVE</md-button>
                            </div>
                        </md-card-footer>
</form>
            </md-card-content>
        </md-card>
    </div>
</section>